// 新增：拖拽状态类型
interface DragState {
  isDragging: boolean;
  dragElementId: string;
  startX: number;
  startY: number;
  elementStartX: number;
  elementStartY: number;
  selectedIds: string[]; // 所有选中的元素ID
  elementStartPositions: { [key: string]: { x: number, y: number } }; // 所有元素的初始位置
}

// 在 canvas.ts 中添加缩放状态接口
interface ScaleState {
  isScaling: boolean;
  scaleHandle: string; // 'nw' | 'ne' | 'sw' | 'se' | 'n' | 'e' | 's' | 'w'
  elementId: string;
  startX: number;
  startY: number;
  elementStartX: number;
  elementStartY: number;
  elementStartWidth: number;
  elementStartHeight: number;
  scaleMultiple: boolean; // 是否同时缩放多个元素
  selectedIds: string[];
  elementStartPositions: { [key: string]: { x: number, y: number, width: number, height: number } };
}

// 用于移动操作的元素位置接口
interface ElementPosition {
  id: string;
  x: number;
  y: number;
}

type OperationData = {
  // 整体画布状态（用于全局撤销/重做）
  elements?: CanvasElement[];
  // 特定元素操作（用于局部撤销/重做）
  elementId?: string;
  before?: Partial<CanvasElement> | CanvasElement[] | ElementPosition[]; // 操作前状态
  after?: Partial<CanvasElement> | CanvasElement[] | ElementPosition[];  // 操作后状态
};

export interface CanvasOperation {
  id: string; // 操作 ID
  type: 'add' | 'delete' | 'move' | 'resize' | 'update' | 'clear' | 'batch'; // 操作类型
  timestamp: number; // 时间戳
  description: string; // 操作描述
  data: OperationData; // 操作数据
}

// 1.1 数据结构定义：HistoryState 接口
export interface HistoryState {
  undoStack: CanvasOperation[]; // 撤销栈
  redoStack: CanvasOperation[]; // 重做栈
  maxHistory: number; // 最大历史条数
  isRecording: boolean; // 记录开关
}
// 1. 导入必要的工具
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { CanvasElement } from '../types/canvas';

// 2. 创建仓库
export const useCanvasStore = defineStore('canvas', () => {
  // 1.3 撤销：从撤销栈取出最后一条操作，恢复到操作前状态，移入重做栈
  const undo = (): boolean => {
    if (historyState.value.undoStack.length === 0) {
      console.warn('撤销栈为空，无法撤销。')
      return false
    }

    const operation = historyState.value.undoStack.pop() as CanvasOperation

    // 4.2 ① 暂停记录
    pauseRecording()

    try {
      console.log(`[undo] ${operation.description} (${operation.type})`)

      const { before, after } = operation.data

      switch (operation.type) {
        case 'add': {
          // 新增撤销：删除对应元素
          const elementId = operation.data.elementId;
          const idsToDel = elementId ? [elementId] : (after as CanvasElement[]).map(e => e.id)
          elements.value = elements.value.filter(el => !idsToDel.includes(el.id))
          break
        }
        case 'delete': {
          // 删除撤销：只保留真值元素
          const toRestore = (Array.isArray(before) ? before : [before])
            .filter((b): b is CanvasElement => b != null)
          if (toRestore.length) elements.value.push(...deepClone(toRestore))
          break
        }
        case 'update':
        case 'move':
        case 'resize':
        case 'batch': {
          // 批量或单个：用 before 快照覆盖
          const arr = Array.isArray(before) ? before : [before]
          arr.forEach(b => {
            if (b) {
              const target = elements.value.find(el => el.id === b.id)
              if (target) Object.assign(target, deepClone(b))
            }
          })
          break
        }
        case 'clear': {
          // 清空撤销：整份恢复
          elements.value = deepClone(before as CanvasElement[])
          break
        }
        default:
          console.warn(`[undo] 未知类型: ${operation.type}`)
          break
      }

      // 移入重做栈
      historyState.value.redoStack.push(operation)

      // 收尾
      clearSelection()
      saveToLocalStorage()
      return true
    } catch (e) {
      // 4.2 异常捕获 & 回滚
      console.error('[undo] 失败:', e)
      historyState.value.undoStack.push(operation) // 还回去
      return false
    } finally {
      // 4.2 恢复记录
      resumeRecording()
    }
  }
  // const undo = () => {

  //   if (historyState.value.undoStack.length === 0) {
  //     console.warn('撤销栈为空，无法撤销。');
  //     return false;
  //   }

  //   const operation = historyState.value.undoStack.pop() as CanvasOperation;

  //   // 1. 暂停记录，防止撤销操作本身被记录
  //   pauseRecording();

  //   try {
  //     console.log(`执行撤销操作: ${operation.description} (类型: ${operation.type})`);

  //     // 使用操作前状态 (operation.data.before) 恢复元素状态
  //     const elementId = operation.data.elementId;
  //     const beforeState = operation.data.before;
  //     const afterState = operation.data.after; // 记录当前状态（操作后的状态），用于重做

  //     switch (operation.type) {
  //       case 'add':
  //         // 新增操作的撤销：删除被新增的元素
  //         if (elementId) {
  //           elements.value = elements.value.filter(el => el.id !== elementId);
  //         } else if (Array.isArray(afterState)) {
  //           // 批量添加的撤销：删除所有新增的元素（afterState即为新增的元素列表）
  //           const idsToDelete = afterState.map(el => el.id);
  //           elements.value = elements.value.filter(el => !idsToDelete.includes(el.id));
  //         }
  //         break;

  //       case 'delete':
  //         // 删除操作的撤销：恢复被删除的元素 (beforeState即为被删除的元素列表)
  //         if (Array.isArray(beforeState)) {
  //           // 批量删除的撤销：恢复所有被删除的元素
  //           elements.value.push(...deepClone(beforeState));
  //         } else if (beforeState && elementId) {
  //           // 单个删除的撤销：恢复单个元素
  //           elements.value.push(deepClone(beforeState) as CanvasElement);
  //         }
  //         break;

  //       case 'update':
  //       case 'move':
  //       case 'resize':
  //       case 'batch': // 批量更新/移动/缩放
  //         // 更新/移动/缩放的撤销：恢复元素操作前的状态
  //         if (Array.isArray(beforeState)) {
  //           // 批量操作的撤销 (beforeState是包含多个元素的数组)
  //           beforeState.forEach(b => {
  //             const target = elements.value.find(el => el.id === b.id);
  //             if (target) {
  //               Object.assign(target, b);
  //             }
  //           });
  //         } else if (beforeState && elementId) {
  //           // 单个操作的撤销
  //           const target = elements.value.find(el => el.id === elementId);
  //           if (target) {
  //             Object.assign(target, beforeState);
  //           }
  //         }
  //         break;

  //       case 'clear':
  //         // 清空操作的撤销：恢复所有被清空的元素
  //         if (Array.isArray(beforeState)) {
  //           elements.value = deepClone(beforeState);
  //         }
  //         break;

  //       default:
  //         console.warn(`未知操作类型 "${operation.type}"，无法撤销。`);
  //         break;
  //     }

  //     // 2. 将操作移入重做栈，用于重做
  //     // 确保重做栈中的操作数据是“撤销前”的状态（即操作原本的“之后”状态）
  //     historyState.value.redoStack.push(operation);

  //     // 清除选择状态，防止撤销后操作的元素仍然处于选中状态
  //     clearSelection();
  //     saveToLocalStorage();
  //     return true;

  //   } catch (e) {
  //     console.error('执行撤销逻辑时发生错误:', e);
  //     // 失败后将操作推回 undo 栈（但不恢复记录）
  //     historyState.value.undoStack.push(operation);
  //     return false;
  //   } finally {
  //     // 3. 恢复记录
  //     resumeRecording();
  //   }
  // };

  // 1.3 重做：从重做栈取出操作，重新执行该操作，将操作移回撤销栈

  const redo = (): boolean => {
    if (historyState.value.redoStack.length === 0) {
      console.warn('重做栈为空，无法重做。')
      return false
    }

    const operation = historyState.value.redoStack.pop() as CanvasOperation

    // 4.2 ① 暂停记录
    pauseRecording()

    try {
      console.log(`[redo] ${operation.description} (${operation.type})`)

      const { before, after } = operation.data

      switch (operation.type) {
        case 'add': {
          // 新增重做：把 after 里的元素重新 push
          const toAdd = Array.isArray(after) ? after : [after]
          elements.value.push(...deepClone(toAdd).filter((a): a is CanvasElement => a != null))
          break
        }
        case 'delete': {
          // 删除重做：再次删掉 before 里的元素
          const idsToDel = (Array.isArray(before) ? before : [before])
            .filter((b): b is CanvasElement => b != null)
            .map(b => b.id)
          elements.value = elements.value.filter(el => !idsToDel.includes(el.id))
          break
        }
        case 'update':
        case 'move':
        case 'resize':
        case 'batch': {
          const arr = (Array.isArray(after) ? after : [after])
            .filter((a): a is CanvasElement => a != null)
          for (const a of arr) {
            const target = elements.value.find(el => el.id === a.id)
            if (target) Object.assign(target, deepClone(a))
          }
          break
        }
        case 'clear': {
          // 清空重做：再次清空
          elements.value = []
          break
        }
        default:
          console.warn(`[redo] 未知类型: ${operation.type}`)
          break
      }

      // 移回撤销栈
      historyState.value.undoStack.push(operation)

      // 收尾
      clearSelection()
      saveToLocalStorage()
      return true
    } catch (e) {
      // 4.2 ② 异常捕获 & 回滚
      console.error('[redo] 失败:', e)
      historyState.value.redoStack.push(operation) // 还回去
      return false
    } finally {
      // 4.2 ① 必恢复记录
      resumeRecording()
    }
  }
  // const redo = () => {
  //   if (historyState.value.redoStack.length === 0) {
  //     console.warn('重做栈为空，无法重做。');
  //     return false;
  //   }

  //   const operation = historyState.value.redoStack.pop() as CanvasOperation;

  //   // 1. 暂停记录，防止重做操作本身被记录
  //   pauseRecording();

  //   try {
  //     console.log(`执行重做操作: ${operation.description} (类型: ${operation.type})`);

  //     // 使用操作后状态 (operation.data.after) 恢复元素状态
  //     const elementId = operation.data.elementId;
  //     const beforeState = operation.data.before; // 记录当前状态（操作前的状态），用于撤销
  //     const afterState = operation.data.after;

  //     switch (operation.type) {
  //       case 'add':
  //         // 新增操作的重做：重新添加元素 (afterState即为新增的元素)
  //         if (Array.isArray(afterState)) {
  //           elements.value.push(...deepClone(afterState));
  //         } else if (afterState) {
  //           elements.value.push(deepClone(afterState) as CanvasElement);
  //         }
  //         break;

  //       case 'delete':
  //         // 删除操作的重做：重新删除元素 (beforeState即为被删除的元素列表)
  //         if (Array.isArray(beforeState)) {
  //           const idsToDelete = beforeState.map(el => el.id);
  //           elements.value = elements.value.filter(el => !idsToDelete.includes(el.id));
  //         } else if (beforeState && elementId) {
  //           elements.value = elements.value.filter(el => el.id !== elementId);
  //         }
  //         break;

  //       case 'update':
  //       case 'move':
  //       case 'resize':
  //       case 'batch':
  //         // 更新/移动/缩放的重做：应用元素操作后的状态 (afterState)
  //         if (Array.isArray(afterState)) {
  //           // 批量操作的重做
  //           afterState.forEach(a => {
  //             const target = elements.value.find(el => el.id === a.id);
  //             if (target) {
  //               Object.assign(target, a);
  //             }
  //           });
  //         } else if (afterState && elementId) {
  //           // 单个操作的重做
  //           const target = elements.value.find(el => el.id === elementId);
  //           if (target) {
  //             Object.assign(target, afterState);
  //           }
  //         }
  //         break;

  //       case 'clear':
  //         // 清空操作的重做：清空所有元素
  //         elements.value = [];
  //         break;

  //       default:
  //         console.warn(`未知操作类型 "${operation.type}"，无法重做。`);
  //         break;
  //     }

  //     // 2. 将操作移回撤销栈
  //     historyState.value.undoStack.push(operation);

  //     // 重新保存本地状态
  //     clearSelection();
  //     saveToLocalStorage();
  //     return true;

  //   } catch (e) {
  //     console.error('执行重做逻辑时发生错误:', e);
  //     // 失败后将操作推回 redo 栈（但不恢复记录）
  //     historyState.value.redoStack.push(operation);
  //     return false;
  //   } finally {
  //     // 3. 恢复记录
  //     resumeRecording();
  //   }
  // };


  // 1.3 clearHistory：清空所有操作记录
  const clearHistory = (): void => {
    historyState.value.undoStack = [];
    historyState.value.redoStack = [];
    console.log('历史记录已清空。');
  };

  // 1.2 recordOperation：将操作记录存入撤销栈，限制栈最大长度，新增操作时清空重做栈
  const recordOperation = (operation: CanvasOperation): void => {
    if (!historyState.value.isRecording) {
      console.warn(`记录已暂停，操作 "${operation.description}" 未被记录。`);
      return;
    }

    // 1. 新增操作时清空重做栈
    if (historyState.value.redoStack.length > 0) {
      historyState.value.redoStack = [];
      console.log(`清空重做栈，当前新操作: ${operation.description}`);
    }

    // 2. 将新操作存入撤销栈
    historyState.value.undoStack.push(operation);

    // 3. 限制栈最大长度
    const max = historyState.value.maxHistory;
    if (historyState.value.undoStack.length > max) {
      // 移除最旧的（栈底的）操作
      historyState.value.undoStack.shift();
      console.log(`撤销栈超出最大限制 (${max})，移除最旧记录。`);
    }

    console.log(`记录操作成功: ${operation.description} (Undo 栈: ${historyState.value.undoStack.length})`);
  };

  // 1.2 pauseRecording：暂停操作记录
  const pauseRecording = (): void => {
    historyState.value.isRecording = false;
    console.log('操作记录已暂停。');
  };

  // 1.2 resumeRecording：恢复操作记录
  const resumeRecording = (): void => {
    historyState.value.isRecording = true;
    console.log('操作记录已恢复。');
  };

  // 1.2 getHistoryInfo：返回当前可撤销 / 可重做状态（布尔值）
  const getHistoryInfo = (): { canUndo: boolean; canRedo: boolean } => {
    return {
      canUndo: historyState.value.undoStack.length > 0,
      canRedo: historyState.value.redoStack.length > 0,
    };
  };
  // 1.2 createOperation：创建标准化操作记录，自动生成唯一 ID、填充时间戳
  const createOperation = (
    type: CanvasOperation['type'],
    description: string,
    data: OperationData
  ): CanvasOperation => {
    return {
      id: generateId(), // 假设 generateId 已经存在并可用
      type,
      timestamp: Date.now(),
      description,
      data: deepClone(data) as OperationData, // 使用深拷贝保证数据的独立性
    };
  };
  //深拷贝
  const deepClone = <T>(obj: T): T => {
    if (obj === null || typeof obj !== 'object') {
      return obj;
    }

    if (Array.isArray(obj)) {
      return obj.map(item => deepClone(item)) as T;
    }

    const cloned = {} as T;
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        cloned[key] = deepClone(obj[key]);
      }
    }
    return cloned;
  };
  // 1.1 新增：历史记录状态对象
  const historyState = ref<HistoryState>({
    undoStack: [],
    redoStack: [],
    maxHistory: 50, // 默认最大记录条数
    isRecording: true // 默认开启记录
  });

  // 在 useCanvasStore 函数中添加缩放状态
  const scaleState = ref<ScaleState>({
    isScaling: false,
    scaleHandle: '',
    elementId: '',
    startX: 0,
    startY: 0,
    elementStartX: 0,
    elementStartY: 0,
    elementStartWidth: 0,
    elementStartHeight: 0,
    scaleMultiple: false,
    selectedIds: [],
    elementStartPositions: {}
  });
  // 这里写仓库的具体内容
  const elements = ref<CanvasElement[]>([]);

  const dragState = ref<DragState>({
    isDragging: false,
    dragElementId: '',
    startX: 0,
    startY: 0,
    elementStartX: 0,
    elementStartY: 0,
    selectedIds: [] as string[],
    elementStartPositions: {} as { [key: string]: { x: number, y: number } }
  });

  // 新增：视口状态（画布视图）
  const viewport = ref({
    x: 0,      // 画布偏移X
    y: 0,      // 画布偏移Y
    scale: 1,  // 缩放比例
    isPanning: false, // 是否正在平移
    panStart: { x: 0, y: 0 } // 平移起始点
  });

  // 在现有的状态后添加框选状态
  const selectionBox = ref({
    isSelecting: false,
    startX: 0,
    startY: 0,
    currentX: 0,
    currentY: 0
  });

  // 元素添加配置：可配置的偏移量和默认位置
  const elementAddConfig = ref({
    defaultOffset: 10, // 默认偏移量（可配置）
    defaultPosition: { x: 100, y: 100 }, // 默认基准位置
    maxSameTypeCount: 1000 // 防止计数溢出
  });

  // 元素添加历史记录：按类型分别记录最后位置和计数
  const elementAddHistory = ref<{
    [key: string]: {
      lastAddedPosition: { x: number, y: number },
      sameTypeCount: number,
      lastAddedTime: number // 记录最后添加时间，用于错误处理
    }
  }>({});

  // 添加框选方法
  const startSelection = (startX: number, startY: number): void => {
    // 关键修复：将传入的屏幕坐标转换为世界坐标，确保与元素坐标系统一致
    const worldStartX = (startX - viewport.value.x) / viewport.value.scale;
    const worldStartY = (startY - viewport.value.y) / viewport.value.scale;

    selectionBox.value = {
      isSelecting: true,
      startX: worldStartX,
      startY: worldStartY,
      currentX: worldStartX,
      currentY: worldStartY
    };
  };

  const updateSelection = (currentX: number, currentY: number): void => {
    if (!selectionBox.value.isSelecting) return;

    // 关键修复：将传入的屏幕坐标转换为世界坐标
    const worldCurrentX = (currentX - viewport.value.x) / viewport.value.scale;
    const worldCurrentY = (currentY - viewport.value.y) / viewport.value.scale;

    selectionBox.value.currentX = worldCurrentX;
    selectionBox.value.currentY = worldCurrentY;
  };

  const endSelection = (): void => {
    if (!selectionBox.value.isSelecting) return;

    // 计算选择框的范围
    const startX = Math.min(selectionBox.value.startX, selectionBox.value.currentX);
    const startY = Math.min(selectionBox.value.startY, selectionBox.value.currentY);
    const endX = Math.max(selectionBox.value.startX, selectionBox.value.currentX);
    const endY = Math.max(selectionBox.value.startY, selectionBox.value.currentY);
    const width = endX - startX;
    const height = endY - startY;

    // 如果选择框太小，认为是点击而不是框选
    if (width < 5 && height < 5) {
      selectionBox.value.isSelecting = false;
      return;
    }

    // 查找在选择框内的元素
    const selectedIds: string[] = [];
    elements.value.forEach(element => {
      // 计算元素的边界（考虑视口变换）
      const elementLeft = element.x;
      const elementTop = element.y;
      const elementRight = element.x + element.width;
      const elementBottom = element.y + element.height;

      // 检查元素是否与选择框相交
      const isIntersecting = !(
        elementRight < startX ||
        elementLeft > endX ||
        elementBottom < startY ||
        elementTop > endY
      );

      if (isIntersecting) {
        selectedIds.push(element.id);
      }
    });

    // 更新选中状态
    if (selectedIds.length > 0) {
      // 先取消所有选择
      elements.value.forEach(element => {
        element.selected = false;
      });

      // 选中在选择框内的元素
      selectedIds.forEach(id => {
        const element = elements.value.find(el => el.id === id);
        if (element) {
          element.selected = true;
        }
      });

      saveToLocalStorage();
    }

    selectionBox.value.isSelecting = false;
  };

  // 元素类型识别和验证函数
  const validateElementType = (element: CanvasElement): boolean => {
    // 验证元素类型是否有效
    const validTypes = ['rectangle', 'circle', 'triangle', 'text', 'image'];
    if (!validTypes.includes(element.type)) {
      console.warn(`无效的元素类型: ${element.type}`);
      return false;
    }

    // 验证元素位置是否有效
    if (typeof element.x !== 'number' || typeof element.y !== 'number' ||
      isNaN(element.x) || isNaN(element.y)) {
      console.warn(`无效的元素位置: x=${element.x}, y=${element.y}`);
      return false;
    }

    return true;
  };

  // 获取同类型元素最后位置信息
  const getLastPositionOfSameType = (elementType: string): { x: number, y: number } | null => {
    const history = elementAddHistory.value[elementType];
    if (history && history.lastAddedPosition) {
      // 检查位置数据是否有效（防止错误数据）
      if (typeof history.lastAddedPosition.x === 'number' &&
        typeof history.lastAddedPosition.y === 'number' &&
        !isNaN(history.lastAddedPosition.x) && !isNaN(history.lastAddedPosition.y)) {
        return history.lastAddedPosition;
      }
    }
    return null;
  };

  // 计算新元素位置（基于绝对定位）
  const calculateNewPosition = (elementType: string): { x: number, y: number } => {
    const lastPosition = getLastPositionOfSameType(elementType);

    if (lastPosition) {
      // 存在上一个同类型元素：向右下偏移
      const offset = elementAddConfig.value.defaultOffset;
      return {
        x: lastPosition.x + offset,
        y: lastPosition.y + offset
      };
    } else {
      // 首个该类型元素：使用默认基准位置
      return {
        x: elementAddConfig.value.defaultPosition.x,
        y: elementAddConfig.value.defaultPosition.y
      };
    }
  };

  // 更新元素添加历史记录
  const updateElementHistory = (elementType: string, position: { x: number, y: number }): void => {
    if (!elementAddHistory.value[elementType]) {
      // 创建新的历史记录
      elementAddHistory.value[elementType] = {
        lastAddedPosition: position,
        sameTypeCount: 1,
        lastAddedTime: Date.now()
      };
    } else {
      // 更新现有历史记录
      elementAddHistory.value[elementType].lastAddedPosition = position;
      elementAddHistory.value[elementType].sameTypeCount++;
      elementAddHistory.value[elementType].lastAddedTime = Date.now();

      // 防止计数溢出
      if (elementAddHistory.value[elementType].sameTypeCount > elementAddConfig.value.maxSameTypeCount) {
        elementAddHistory.value[elementType].sameTypeCount = 1;
      }
    }
  };

  // 添加元素的方法（完善的类型识别和偏移机制）
  const addElement = (element: CanvasElement): void => {
    // 预先生成ID，保证操作记录和实际元素 ID 一致
    const newElementId = generateId();
    element.id = newElementId; // 赋予ID

    // ⚡ 关键步骤：在添加到数组之前，先更新选中状态 ⚡
    // 确保取消选中所有其他元素
    elements.value.forEach(el => el.selected = false);
    // 设置新元素为选中状态
    element.selected = true;

    try {
      // 1. 验证元素类型和位置 (保持不变)
      if (!validateElementType(element)) {
        console.error('元素验证失败，无法添加');
        return;
      }

      // 2. 计算新元素位置 (保持不变)
      const newPosition = calculateNewPosition(element.type);
      element.x = newPosition.x;
      element.y = newPosition.y;

      // 3. 记录操作：在元素添加到数组之前
      if (historyState.value.isRecording) {
        const operation = createOperation(
          'add',
          `添加了 ${element.type} 元素`,
          {
            elementId: newElementId,
            before: undefined, // 添加操作没有操作前状态
            after: deepClone(element), // 记录新增元素的完整状态 (包括已选中的状态)
          }
        );
        recordOperation(operation);
      }

      // 4. 更新元素添加历史记录 (保持不变)
      updateElementHistory(element.type, newPosition);

      // 5. 添加元素到数组 (保持不变)
      elements.value.push(element);

      // 6. 保存到本地存储 (保持不变)
      saveToLocalStorage();
      console.log(`添加${element.type}元素成功，位置: (${element.x}, ${element.y})`);
      resetPasteState(); // 添加新元素后重置粘贴计数
    } catch (error) {
      console.error('添加元素时发生错误:', error);
      // ... 错误处理逻辑保持不变
      saveToLocalStorage();
    }
  };
  // const addElement = (element: CanvasElement) => {
  //   try {
  //     // 1. 验证元素类型和位置
  //     if (!validateElementType(element)) {
  //       console.error('元素验证失败，无法添加');
  //       return;
  //     }

  //     // 2. 计算新元素位置（基于绝对定位）
  //     const newPosition = calculateNewPosition(element.type, element.x, element.y);

  //     // 3. 更新元素位置
  //     element.x = newPosition.x;
  //     element.y = newPosition.y;

  //     // 4. 更新元素添加历史记录
  //     updateElementHistory(element.type, newPosition);

  //     // 5. 添加元素到数组
  //     elements.value.push(element);

  //     // 6. 保存到本地存储
  //     saveToLocalStorage();

  //     console.log(`添加${element.type}元素成功，位置: (${element.x}, ${element.y})`);

  //   } catch (error) {
  //     console.error('添加元素时发生错误:', error);
  //     // 错误处理：回退到默认位置
  //     element.x = elementAddConfig.value.defaultPosition.x;
  //     element.y = elementAddConfig.value.defaultPosition.y;
  //     elements.value.push(element);
  //     saveToLocalStorage();
  //   }
  // };

  // 更新元素添加配置的方法
  const updateElementAddConfig = (newConfig: Partial<typeof elementAddConfig.value>): void => {
    try {
      Object.assign(elementAddConfig.value, newConfig);
      console.log('元素添加配置已更新:', elementAddConfig.value);
    } catch (error) {
      console.error('更新元素添加配置时发生错误:', error);
    }
  };

  // 重置元素添加历史记录
  const resetElementAddHistory = (elementType?: string): void => {
    try {
      if (elementType) {
        // 重置特定类型的元素历史
        delete elementAddHistory.value[elementType];
        console.log(`已重置${elementType}类型的元素添加历史`);
      } else {
        // 重置所有类型的元素历史
        elementAddHistory.value = {};
        console.log('已重置所有类型的元素添加历史');
      }
    } catch (error) {
      console.error('重置元素添加历史时发生错误:', error);
    }
  };

  // 获取元素添加统计信息
  const getElementAddStats = (): { [key: string]: { count: number, lastAdded: number } } => {
    const stats: { [key: string]: { count: number, lastAdded: number } } = {};

    Object.keys(elementAddHistory.value).forEach(type => {
      const history = elementAddHistory.value[type];
      if (history) {
        stats[type] = {
          count: history.sameTypeCount,
          lastAdded: history.lastAddedTime
        };
      }
    });

    return stats;
  };

  // 新增：选择单个元素
  const selectElement = (id: string): void => {
    // 先取消所有元素的选中状态
    elements.value.forEach(element => {
      element.selected = false;
    });

    // 选中指定元素
    const element = elements.value.find(el => el.id === id);
    if (element) {
      element.selected = true;
    }

    saveToLocalStorage();
  };

  // 新增：取消所有选择
  const clearSelection = (): void => {
    elements.value.forEach(element => {
      element.selected = false;
    });
    saveToLocalStorage();
  };

  // 新增：切换元素选择状态（用于多选）
  const toggleElementSelection = (id: string): void => {
    const element = elements.value.find(el => el.id === id);
    if (element) {
      element.selected = !element.selected;
    }
    saveToLocalStorage();
  };

  // 新增：获取选中的元素
  const selectedElements = (): CanvasElement[] => {
    return elements.value.filter(element => element.selected);
  };

  // 新增：开始拖拽
  const startDrag = (elementId: string, startX: number, startY: number): void => {
    // const element = elements.value.find(el => el.id === elementId);
    const selectedIds = selectedElements().map(el => el.id);

    // if (element) {
    //   dragState.value = {
    //     isDragging: true,
    //     dragElementId: elementId,
    //     startX,
    //     startY,
    //     elementStartX: element.x,
    //     elementStartY: element.y
    //   };
    // }
    // 如果没有任何元素被选中，就选中当前点击的元素
    if (selectedIds.length === 0) {
      selectElement(elementId);
      selectedIds.push(elementId);
    }

    // 记录所有选中元素的初始位置
    const elementStartPositions: { [key: string]: { x: number, y: number } } = {};
    selectedIds.forEach(id => {
      const el = elements.value.find(e => e.id === id);
      if (el) {
        elementStartPositions[id] = { x: el.x, y: el.y };
      }
    });

    // 关键修复：将传入的世界坐标转换为屏幕坐标，确保与updateDrag中的坐标系统一致
    const screenStartX = startX * viewport.value.scale + viewport.value.x;
    const screenStartY = startY * viewport.value.scale + viewport.value.y;

    dragState.value = {
      isDragging: true,
      dragElementId: elementId, // 仍然记录最初拖动的元素
      startX: screenStartX,
      startY: screenStartY,
      elementStartX: 0, // 不再使用单个元素的位置
      elementStartY: 0,
      selectedIds, // 新增：记录所有选中的元素ID
      elementStartPositions // 新增：记录所有选中元素的初始位置
    };
  };

  // 开始缩放
  const startScale = (elementId: string, handle: string, startX: number, startY: number): void => {
    const element = elements.value.find(el => el.id === elementId);
    if (!element) return;

    const selectedElementsList = selectedElements();
    const selectedIds = selectedElementsList.map(el => el.id);

    // 记录所有选中元素的初始位置和尺寸
    const elementStartPositions: { [key: string]: { x: number, y: number, width: number, height: number } } = {};

    // 如果有多选且当前元素被选中，则缩放所有选中的元素
    if (selectedIds.length > 1 && selectedIds.includes(elementId)) {
      selectedIds.forEach(id => {
        const el = elements.value.find(e => e.id === id);
        if (el) {
          elementStartPositions[id] = {
            x: el.x,
            y: el.y,
            width: el.width,
            height: el.height
          };
        }
      });
    } else {
      // 只缩放当前元素
      selectedIds.forEach(id => {
        if (id === elementId) {
          elementStartPositions[id] = {
            x: element.x,
            y: element.y,
            width: element.width,
            height: element.height
          };
        }
      });
    }

    scaleState.value = {
      isScaling: true,
      scaleHandle: handle,
      elementId,
      startX,
      startY,
      elementStartX: element.x,
      elementStartY: element.y,
      elementStartWidth: element.width,
      elementStartHeight: element.height,
      scaleMultiple: selectedIds.length > 1,
      selectedIds: selectedIds.includes(elementId) ? selectedIds : [elementId],
      elementStartPositions
    };
  };

  // 更新缩放
  const updateScale = (currentX: number, currentY: number): void => {
    if (!scaleState.value.isScaling) return;

    // 关键修复：将屏幕坐标差值转换为世界坐标差值，考虑缩放比例
    const deltaX = (currentX - scaleState.value.startX) / viewport.value.scale;
    const deltaY = (currentY - scaleState.value.startY) / viewport.value.scale;
    const handle = scaleState.value.scaleHandle;

    // 计算缩放比例（基于初始尺寸）
    const minWidth = 10; // 最小宽度
    const minHeight = 10; // 最小高度

    // 处理每个选中的元素
    scaleState.value.selectedIds.forEach(id => {
      const element = elements.value.find(el => el.id === id);
      const startPos = scaleState.value.elementStartPositions[id];

      if (!element || !startPos) return;

      let newX = startPos.x;
      let newY = startPos.y;
      let newWidth = startPos.width;
      let newHeight = startPos.height;

      // 根据控制柄位置计算新的位置和尺寸
      switch (handle) {
        case 'nw': // 左上
          newX = startPos.x + deltaX;
          newY = startPos.y + deltaY;
          newWidth = Math.max(minWidth, startPos.width - deltaX);
          newHeight = Math.max(minHeight, startPos.height - deltaY);
          break;
        case 'ne': // 右上
          newY = startPos.y + deltaY;
          newWidth = Math.max(minWidth, startPos.width + deltaX);
          newHeight = Math.max(minHeight, startPos.height - deltaY);
          break;
        case 'sw': // 左下
          newX = startPos.x + deltaX;
          newWidth = Math.max(minWidth, startPos.width - deltaX);
          newHeight = Math.max(minHeight, startPos.height + deltaY);
          break;
        case 'se': // 右下
          newWidth = Math.max(minWidth, startPos.width + deltaX);
          newHeight = Math.max(minHeight, startPos.height + deltaY);
          break;
        case 'n': // 上
          newY = startPos.y + deltaY;
          newHeight = Math.max(minHeight, startPos.height - deltaY);
          break;
        case 's': // 下
          newHeight = Math.max(minHeight, startPos.height + deltaY);
          break;
        case 'e': // 右
          newWidth = Math.max(minWidth, startPos.width + deltaX);
          break;
        case 'w': // 左
          newX = startPos.x + deltaX;
          newWidth = Math.max(minWidth, startPos.width - deltaX);
          break;
      }

      // 应用新的位置和尺寸
      element.x = newX;
      element.y = newY;
      element.width = newWidth;
      element.height = newHeight;
    });
  };


  // 结束缩放
  const endScale = (): void => {
    if (!scaleState.value.isScaling) return;

    if (historyState.value.isRecording) {
      // 1. 提取缩放前的元素状态 (在 startScale 中记录)
      const selectedIds = scaleState.value.selectedIds;
      const beforeState = selectedIds.map(id => {
        const startPos = scaleState.value.elementStartPositions[id];
        if (startPos) {
          return {
            id: id,
            x: startPos.x,
            y: startPos.y,
            width: startPos.width,
            height: startPos.height,
          };
        }
        return undefined;
      }).filter((x): x is { id: string, x: number, y: number, width: number, height: number } => x !== undefined);

      // 2. 提取缩放后的元素状态
      const afterState = selectedIds.map(id => {
        const el = elements.value.find(e => e.id === id);
        return el ? { id: id, x: el.x, y: el.y, width: el.width, height: el.height } : undefined;
      }).filter((x): x is { id: string, x: number, y: number, width: number, height: number } => x !== undefined);

      // 3. 记录操作
      const operation = createOperation(
        'resize',
        `缩放了 ${selectedIds.length} 个元素`,
        {
          before: beforeState,
          after: afterState
        }
      );
      recordOperation(operation);
    }

    scaleState.value.isScaling = false;
    saveToLocalStorage();
    resetPasteState(); // 缩放结束时重置粘贴计数
  };
  // const endScale = () => {
  //   if (scaleState.value.isScaling) {
  //     scaleState.value.isScaling = false;
  //     saveToLocalStorage();
  //   }
  // };

  // 按比例缩放选中元素
  const scaleSelectedElements = (scaleFactor: number): void => {
    const selected = selectedElements();
    if (selected.length === 0) return;

    const minSize = 10; // 最小尺寸限制

    selected.forEach(element => {
      const newWidth = Math.max(minSize, element.width * scaleFactor);
      const newHeight = Math.max(minSize, element.height * scaleFactor);

      updateElement(element.id, {
        width: newWidth,
        height: newHeight
      });
    });
  };

  // 新增：更新拖拽位置
  const updateDrag = (currentX: number, currentY: number): void => {
    if (!dragState.value.isDragging) return;

    // 关键优化：将屏幕坐标差值转换为世界坐标差值，考虑缩放比例
    const deltaX = (currentX - dragState.value.startX) / viewport.value.scale;
    const deltaY = (currentY - dragState.value.startY) / viewport.value.scale;

    // 移动所有选中的元素
    dragState.value.selectedIds.forEach(id => {
      const element = elements.value.find(el => el.id === id);
      const startPos = dragState.value.elementStartPositions[id];
      if (element && startPos) {
        element.x = startPos.x + deltaX;
        element.y = startPos.y + deltaY;
      }
    });
  };

  // 结束拖拽
  const endDrag = (): void => {
    if (!dragState.value.isDragging) return;

    if (historyState.value.isRecording) {
      // 1. 提取拖拽前的元素状态 (在 startDrag 中记录)
      const selectedIds = dragState.value.selectedIds;
      const beforeState = selectedIds.map(id => {
        const startPos = dragState.value.elementStartPositions[id];
        if (startPos) {
          return {
            id: id,
            x: startPos.x,
            y: startPos.y,
          };
        }
        return undefined;
      }).filter((x): x is { id: string, x: number, y: number } => x !== undefined);

      // 2. 提取拖拽后的元素状态
      const afterState = selectedIds.map(id => {
        const el = elements.value.find(e => e.id === id);
        return el ? { id: id, x: el.x, y: el.y } : undefined;
      }).filter((x): x is { id: string, x: number, y: number } => x !== undefined);

      // 3. 记录操作
      const operation = createOperation(
        'move',
        `移动了 ${selectedIds.length} 个元素`,
        {
          before: beforeState,
          after: afterState
        }
      );
      recordOperation(operation);
    }

    dragState.value.isDragging = false;
    saveToLocalStorage(); // 拖拽结束时保存
    resetPasteState(); // 拖拽结束时重置粘贴计数
  };
  // const endDrag = () => {
  //   if (dragState.value.isDragging) {
  //     dragState.value.isDragging = false;
  //     saveToLocalStorage(); // 拖拽结束时保存
  //   }
  // };

  // 新增：画布平移方法
  const startPan = (startX: number, startY: number): void => {
    viewport.value.isPanning = true;
    viewport.value.panStart = { x: startX, y: startY };
  };

  const updatePan = (currentX: number, currentY: number): void => {
    if (!viewport.value.isPanning) return;

    const deltaX = currentX - viewport.value.panStart.x;
    const deltaY = currentY - viewport.value.panStart.y;

    viewport.value.x += deltaX;
    viewport.value.y += deltaY;

    viewport.value.panStart = { x: currentX, y: currentY };
  };

  const endPan = (): void => {
    viewport.value.isPanning = false;
  };

  // 新增：画布缩放方法
  const zoom = (delta: number, centerX?: number, centerY?: number): void => {
    const zoomFactor = delta > 0 ? 1.1 : 0.9; // 滚轮向上放大，向下缩小
    const oldScale = viewport.value.scale;
    const newScale = Math.max(0.1, Math.min(5, viewport.value.scale * zoomFactor));

    // 限制缩放范围

    // 如果有中心点，基于中心点缩放
    if (centerX !== undefined && centerY !== undefined) {
      const worldX = (centerX - viewport.value.x) / oldScale;
      const worldY = (centerY - viewport.value.y) / oldScale;

      viewport.value.x = centerX - worldX * newScale;
      viewport.value.y = centerY - worldY * newScale;
    }

    viewport.value.scale = newScale;
  };

  // 新增：重置视图
  const resetViewport = (): void => {
    viewport.value = {
      x: 0,
      y: 0,
      scale: 1,
      isPanning: false,
      panStart: { x: 0, y: 0 }
    };
  };


  // 持久化
  const saveToLocalStorage = (): void => {
    const state = {
      elements: elements.value,
      viewport: {
        x: viewport.value.x,
        y: viewport.value.y,
        scale: viewport.value.scale
      }
    };
    localStorage.setItem('canvas-state', JSON.stringify(state));
  };

  const loadFromLocalStorage = (): void => {

    const saved = localStorage.getItem('canvas-state');
    if (saved) {
      const state = JSON.parse(saved);
      elements.value = state.elements || [];

      if (state.viewport) {
        viewport.value.x = state.viewport.x || 0;
        viewport.value.y = state.viewport.y || 0;
        viewport.value.scale = state.viewport.scale || 1;
      }
    }
  };

  // 更新元素 (Update Element)
  const updateElement = (id: string, updates: Partial<CanvasElement>): void => {
    const element = elements.value.find(el => el.id === id);
    if (!element) return;

    if (historyState.value.isRecording) {
      // 1. 记录元素更新前的完整状态
      const beforeState = deepClone(element);

      // 2. 执行更新
      Object.assign(element, updates);

      // 3. 记录元素更新后的完整状态
      const afterState = deepClone(element);

      // 4. 将操作记录存入撤销栈
      const operation = createOperation(
        'update',
        `更新了元素 ${id} 的属性`,
        {
          elementId: id,
          before: beforeState,
          after: afterState
        }
      );
      recordOperation(operation);

    } else {
      // 如果记录暂停，则直接更新
      Object.assign(element, updates);
    }

    saveToLocalStorage();
    // 如果修改了位置或尺寸，则重置粘贴计数
    if (updates.x !== undefined || updates.y !== undefined || updates.width !== undefined || updates.height !== undefined) {
      resetPasteState();
    }
  };

  // const updateElement = (id: string, updates: Partial<CanvasElement>) => {
  //   const element = elements.value.find(el => el.id === id);
  //   if (element) {
  //     Object.assign(element, updates);
  //     saveToLocalStorage();
  //   }
  // };

  // 新增：剪贴板状态
  const clipboard = ref<CanvasElement[]>([]);

  // 新增：粘贴状态（用于连续粘贴的偏移量控制）
  const pasteState = ref({
    pasteCount: 0, // 粘贴次数
    lastPastePosition: { x: 0, y: 0 }, // 最后一次粘贴的位置
    originalBoundingBox: { minX: 0, minY: 0, maxX: 0, maxY: 0, centerX: 0, centerY: 0 } // 原始包围盒
  });

  // 新增：复制选中的元素到剪贴板
  const copySelectedElements = (): boolean => {
    const selected = selectedElements();
    if (selected.length === 0) {
      console.warn('没有选中的元素可以复制');
      return false;
    }

    // 检查是否复制了相同的元素（防止重复复制相同内容）
    const selectedIds = selected.map(el => el.id).sort().join(',');
    const lastCopiedIds = clipboard.value.map(el => el.id).sort().join(',');

    if (selectedIds === lastCopiedIds) {
      console.log('复制了相同的元素，剪贴板内容保持不变');
      return true; // 仍然返回成功，但内容不变
    }

    try {
      // 深拷贝选中的元素，并清除选中状态
      clipboard.value = selected.map(element => ({
        ...JSON.parse(JSON.stringify(element)),
        selected: false,
        id: generateId() // 为复制的元素生成新的ID
      }));

      // 记录原始包围盒信息，用于连续粘贴
      pasteState.value.originalBoundingBox = calculateBoundingBox(selected);
      pasteState.value.pasteCount = 0; // 重置粘贴计数

      // 保存剪贴板状态到本地存储
      saveClipboardToLocalStorage();
      console.log(`复制了 ${selected.length} 个元素到剪贴板`);
      console.log(`原始包围盒: (${pasteState.value.originalBoundingBox.minX}, ${pasteState.value.originalBoundingBox.minY}) - (${pasteState.value.originalBoundingBox.maxX}, ${pasteState.value.originalBoundingBox.maxY})`);
      return true;
    } catch (error) {
      console.error('复制元素时发生错误:', error);
      return false;
    }
  };

  // 新增：计算元素组的包围盒（最小矩形边界）
  const calculateBoundingBox = (elements: CanvasElement[]): { minX: number, minY: number, maxX: number, maxY: number, width: number, height: number, centerX: number, centerY: number } => {
    if (elements.length === 0) {
      return { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0, centerX: 0, centerY: 0 };
    }

    let minX = Infinity;
    let minY = Infinity;
    let maxX = -Infinity;
    let maxY = -Infinity;

    elements.forEach(element => {
      minX = Math.min(minX, element.x);
      minY = Math.min(minY, element.y);
      maxX = Math.max(maxX, element.x + element.width);
      maxY = Math.max(maxY, element.y + element.height);
    });

    const width = maxX - minX;
    const height = maxY - minY;
    const centerX = minX + width / 2;
    const centerY = minY + height / 2;

    return { minX, minY, maxX, maxY, width, height, centerX, centerY };
  };

  // 新增：计算视口中心的世界坐标
  const getViewportCenter = (): { x: number, y: number } => {
    // 假设画布大小为 800x600，可以根据实际情况调整
    const canvasWidth = 800;
    const canvasHeight = 600;

    // 计算视口中心的世界坐标
    const viewportCenterX = (-viewport.value.x + canvasWidth / 2) / viewport.value.scale;
    const viewportCenterY = (-viewport.value.y + canvasHeight / 2) / viewport.value.scale;

    return { x: viewportCenterX, y: viewportCenterY };
  };

  // 新增：检查元素是否在画布边界内
  const isElementInCanvasBounds = (element: CanvasElement): boolean => {
    // 定义画布边界（可以根据实际需求调整）
    const canvasBounds = {
      minX: -1000,
      minY: -1000,
      maxX: 2000,
      maxY: 2000
    };

    return element.x >= canvasBounds.minX &&
      element.y >= canvasBounds.minY &&
      element.x + element.width <= canvasBounds.maxX &&
      element.y + element.height <= canvasBounds.maxY;
  };

  // 新增：粘贴剪贴板中的元素到画布，保持相对位置关系
  // 粘贴剪贴板中的元素到画布，保持相对位置关系
  const pasteElements = (offsetX: number = 10, offsetY: number = 10): boolean => {
    if (clipboard.value.length === 0) {
      console.warn('剪贴板为空，无法粘贴');
      return false;
    }

    // 检查剪贴板数据是否有效
    if (!Array.isArray(clipboard.value) || clipboard.value.some(el => !el || !el.type)) {
      console.error('剪贴板数据无效，无法粘贴');
      clipboard.value = [];
      saveClipboardToLocalStorage();
      return false;
    }

    try {
      // 计算剪贴板中元素的包围盒
      const clipboardBoundingBox = calculateBoundingBox(clipboard.value);

      // 计算粘贴位置（基于当前选中元素或视口中心）
      const selectedElementsList = selectedElements();
      let targetX = 0;
      let targetY = 0;
      let pasteStrategy = '';

      if (selectedElementsList.length > 0) {
        // 策略1：如果有选中的元素，基于选中元素的包围盒中心粘贴
        const selectedBoundingBox = calculateBoundingBox(selectedElementsList);
        targetX = selectedBoundingBox.centerX;
        targetY = selectedBoundingBox.centerY;
        pasteStrategy = '基于选中元素中心';
      } else {
        // 策略2：如果没有选中的元素，基于视口中心粘贴
        const viewportCenter = getViewportCenter();
        targetX = viewportCenter.x;
        targetY = viewportCenter.y;
        pasteStrategy = '基于视口中心';
      }

      // 固定偏移量机制：每次粘贴都向右下偏移10px
      const fixedOffsetX = offsetX;
      const fixedOffsetY = offsetY;

      // 应用固定偏移量
      targetX += fixedOffsetX;
      targetY += fixedOffsetY;

      const newElements: CanvasElement[] = [];
      let outOfBoundsCount = 0;

      // 粘贴所有剪贴板中的元素，保持相对位置关系
      clipboard.value.forEach(element => {
        // 计算元素相对于包围盒中心的偏移量
        const elementRelativeX = element.x - clipboardBoundingBox.centerX;
        const elementRelativeY = element.y - clipboardBoundingBox.centerY;

        // 应用相同的偏移量到目标位置
        const newX = targetX + elementRelativeX;
        const newY = targetY + elementRelativeY;

        // 注意：这里需要确保 newElement 是一个深拷贝，避免对 clipboard.value 的引用污染
        const newElement: CanvasElement = {
          ...deepClone(element), // 确保是深拷贝
          x: newX,
          y: newY,
          id: generateId() // 为每个粘贴的元素生成新的ID
        };

        // 验证元素数据完整性
        if (!newElement.type || !newElement.id) {
          console.warn('跳过无效的剪贴板元素');
          return;
        }

        // 检查元素是否在画布边界内
        if (!isElementInCanvasBounds(newElement)) {
          console.warn(`元素 ${newElement.id} 超出画布边界，已调整位置`);
          outOfBoundsCount++;
          // 可以在这里添加边界调整逻辑
        }

        newElements.push(newElement);
      });

      if (newElements.length === 0) {
        console.warn('没有有效的元素可以粘贴');
        return false;
      }

      // 1. **执行操作：批量添加新元素**
      elements.value.push(...newElements);

      // 2. 清除所有选中状态，然后选中刚刚粘贴的元素
      clearSelection();
      newElements.forEach(element => {
        element.selected = true;
      });

      // 3. **记录操作**
      if (historyState.value.isRecording) {
        const operation = createOperation(
          'add', // 使用 'add' 类型，因为其撤销逻辑是删除元素
          `粘贴了 ${newElements.length} 个元素`,
          {
            before: undefined,
            after: newElements.map(el => deepClone(el)), // 记录粘贴后所有元素的完整状态
          }
        );
        recordOperation(operation);
      }

      // 4. 更新粘贴状态
      pasteState.value.pasteCount = pasteState.value.pasteCount + 1;
      pasteState.value.lastPastePosition = { x: targetX, y: targetY };

      saveToLocalStorage();

      // 详细的日志输出，便于调试
      const newBoundingBox = calculateBoundingBox(newElements);
      console.log(`粘贴了 ${newElements.length} 个元素，保持相对位置关系`);
      console.log(`粘贴策略: ${pasteStrategy}`);
      console.log(`粘贴次数: ${pasteState.value.pasteCount}`);
      console.log(`固定偏移量: (${fixedOffsetX}, ${fixedOffsetY})`);
      console.log(`原始包围盒: (${clipboardBoundingBox.minX}, ${clipboardBoundingBox.minY}) - (${clipboardBoundingBox.maxX}, ${clipboardBoundingBox.maxY})`);
      console.log(`目标位置: (${targetX}, ${targetY})`);
      console.log(`新包围盒: (${newBoundingBox.minX}, ${newBoundingBox.minY}) - (${newBoundingBox.maxX}, ${newBoundingBox.maxY})`);
      if (outOfBoundsCount > 0) {
        console.warn(`${outOfBoundsCount} 个元素超出画布边界`);
      }

      return true;
    } catch (error) {
      console.error('粘贴元素时发生错误:', error);
      return false;
    }
  };
  // const pasteElements = (offsetX: number = 10, offsetY: number = 10) => {
  //   if (clipboard.value.length === 0) {
  //     console.warn('剪贴板为空，无法粘贴');
  //     return false;
  //   }

  //   // 检查剪贴板数据是否有效
  //   if (!Array.isArray(clipboard.value) || clipboard.value.some(el => !el || !el.type)) {
  //     console.error('剪贴板数据无效，无法粘贴');
  //     clipboard.value = [];
  //     saveClipboardToLocalStorage();
  //     return false;
  //   }

  //   try {
  //     // 计算剪贴板中元素的包围盒
  //     const clipboardBoundingBox = calculateBoundingBox(clipboard.value);

  //     // 计算粘贴位置（基于当前选中元素或视口中心）
  //     const selectedElementsList = selectedElements();
  //     let targetX = 0;
  //     let targetY = 0;
  //     let pasteStrategy = '';

  //     if (selectedElementsList.length > 0) {
  //       // 策略1：如果有选中的元素，基于选中元素的包围盒中心粘贴
  //       const selectedBoundingBox = calculateBoundingBox(selectedElementsList);
  //       targetX = selectedBoundingBox.centerX;
  //       targetY = selectedBoundingBox.centerY;
  //       pasteStrategy = '基于选中元素中心';
  //     } else {
  //       // 策略2：如果没有选中的元素，基于视口中心粘贴
  //       const viewportCenter = getViewportCenter();
  //       targetX = viewportCenter.x;
  //       targetY = viewportCenter.y;
  //       pasteStrategy = '基于视口中心';
  //     }

  //     // 连续粘贴的偏移量累加机制
  //     const pasteCount = pasteState.value.pasteCount;
  //     const cumulativeOffsetX = offsetX * (pasteCount + 1);
  //     const cumulativeOffsetY = offsetY * (pasteCount + 1);

  //     // 应用累加的偏移量
  //     targetX += cumulativeOffsetX;
  //     targetY += cumulativeOffsetY;

  //     const newElements: CanvasElement[] = [];
  //     let outOfBoundsCount = 0;

  //     // 粘贴所有剪贴板中的元素，保持相对位置关系
  //     clipboard.value.forEach(element => {
  //       // 计算元素相对于包围盒中心的偏移量
  //       const elementRelativeX = element.x - clipboardBoundingBox.centerX;
  //       const elementRelativeY = element.y - clipboardBoundingBox.centerY;

  //       // 应用相同的偏移量到目标位置
  //       const newX = targetX + elementRelativeX;
  //       const newY = targetY + elementRelativeY;

  //       const newElement = {
  //         ...JSON.parse(JSON.stringify(element)),
  //         x: newX,
  //         y: newY,
  //         id: generateId() // 为每个粘贴的元素生成新的ID
  //       };

  //       // 验证元素数据完整性
  //       if (!newElement.type || !newElement.id) {
  //         console.warn('跳过无效的剪贴板元素');
  //         return;
  //       }

  //       // 检查元素是否在画布边界内
  //       if (!isElementInCanvasBounds(newElement)) {
  //         console.warn(`元素 ${newElement.id} 超出画布边界，已调整位置`);
  //         outOfBoundsCount++;
  //         // 可以在这里添加边界调整逻辑
  //       }

  //       newElements.push(newElement);
  //     });

  //     if (newElements.length === 0) {
  //       console.warn('没有有效的元素可以粘贴');
  //       return false;
  //     }

  //     // 批量添加新元素
  //     elements.value.push(...newElements);

  //     // 清除所有选中状态，然后选中刚刚粘贴的元素
  //     clearSelection();
  //     newElements.forEach(element => {
  //       element.selected = true;
  //     });

  //     // 更新粘贴状态
  //     pasteState.value.pasteCount = pasteCount + 1;
  //     pasteState.value.lastPastePosition = { x: targetX, y: targetY };

  //     saveToLocalStorage();

  //     // 详细的日志输出，便于调试
  //     const newBoundingBox = calculateBoundingBox(newElements);
  //     console.log(`粘贴了 ${newElements.length} 个元素，保持相对位置关系`);
  //     console.log(`粘贴策略: ${pasteStrategy}`);
  //     console.log(`粘贴次数: ${pasteState.value.pasteCount}`);
  //     console.log(`默认偏移量: (${offsetX}, ${offsetY})`);
  //     console.log(`累加偏移量: (${cumulativeOffsetX}, ${cumulativeOffsetY})`);
  //     console.log(`原始包围盒: (${clipboardBoundingBox.minX}, ${clipboardBoundingBox.minY}) - (${clipboardBoundingBox.maxX}, ${clipboardBoundingBox.maxY})`);
  //     console.log(`目标位置: (${targetX}, ${targetY})`);
  //     console.log(`新包围盒: (${newBoundingBox.minX}, ${newBoundingBox.minY}) - (${newBoundingBox.maxX}, ${newBoundingBox.maxY})`);
  //     if (outOfBoundsCount > 0) {
  //       console.warn(`${outOfBoundsCount} 个元素超出画布边界`);
  //     }

  //     return true;
  //   } catch (error) {
  //     console.error('粘贴元素时发生错误:', error);
  //     return false;
  //   }
  // };

  // 新增：保存剪贴板状态到本地存储
  const saveClipboardToLocalStorage = (): void => {
    localStorage.setItem('canvas-clipboard', JSON.stringify(clipboard.value));
  };

  // 新增：从本地存储加载剪贴板状态
  const loadClipboardFromLocalStorage = (): void => {
    const saved = localStorage.getItem('canvas-clipboard');
    if (saved) {
      try {
        clipboard.value = JSON.parse(saved);
      } catch (error) {
        console.error('加载剪贴板数据失败:', error);
        clipboard.value = [];
      }
    }
  };

  // 新增：生成唯一ID的辅助函数
  const generateId = (): string => 'element_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);

  const resetPasteState = (): void => {
    if (pasteState.value.pasteCount > 0) {
      pasteState.value.pasteCount = 0;
      console.log('元素被修改或移动，粘贴计数已重置。');
    }
  };
  // 在现有的方法后面添加删除方法
  // 删除选中的元素
  const deleteSelectedElements = (): void => {
    const selected = selectedElements();
    if (selected.length === 0) {
      return;
    }
    // 1. 记录操作前被删除元素的完整状态 (深拷贝)
    //    在执行删除操作之前获取快照，是正确的。
    let operation: CanvasOperation | null = null;
    if (historyState.value.isRecording) {
      operation = createOperation(
        'delete',
        `删除了 ${selected.length} 个元素`,
        {
          // 记录被删除元素的快照，用于撤销
          before: selected.map(el => deepClone(el)),
          after: undefined // 删除操作的 'after' 状态是 undefined/null
        }
      );
    }
    // 2. 执行删除操作 (无论是否记录历史，都要执行)
    const selectedIds = selected.map(el => el.id);
    elements.value = elements.value.filter(element => !selectedIds.includes(element.id));
    // 3. 将操作记录存入撤销栈 (如果操作已创建)
    if (operation) { // 检查 operation 是否在第 1 步被创建
      recordOperation(operation);
    }
    // ⚠️ 注意：您原来的代码中有一个 else 块，这导致如果 isRecording=false，
    // elements.value 会被修改，但不会保存到本地。

    // 4. 执行其他收尾工作 (始终执行)
    saveToLocalStorage();
    resetPasteState();
  };
  // const deleteSelectedElements = () => {
  //   // 获取所有选中的元素ID
  //   const selectedIds = selectedElements().map(el => el.id);

  //   // 过滤掉选中的元素
  //   elements.value = elements.value.filter(element => !selectedIds.includes(element.id));

  //   saveToLocalStorage();
  // };

  // 新增：将选中元素提升到最前面
  const bringToFront = (): boolean => {
    const selected = selectedElements();
    if (selected.length === 0) {
      console.warn('没有选中的元素可以提升层级');
      return false;
    }

    // 获取当前最大的zIndex值
    const maxZIndex = Math.max(...elements.value.map(el => el.zIndex || 0));

    // 为每个选中的元素设置新的zIndex值（比当前最大值大1）
    selected.forEach(element => {
      element.zIndex = maxZIndex + 1;
    });

    saveToLocalStorage();
    console.log(`已将 ${selected.length} 个元素提升到最前面，新zIndex: ${maxZIndex + 1}`);
    return true;
  };

  // 在 canvas.ts 中添加自动扩展机制
  const AUTO_EXPAND_AMOUNT = 1000; // 每次扩展1000像素

  const checkAndExpandViewport = () => {
    // 获取当前所有元素的边界
    const bounds = getElementsBounds();
    const canvasSize = getCanvasSize();

    // 计算当前视口在世界坐标中的位置
    const worldViewport = getViewportWorldRect();

    // 检查是否需要扩展各个方向
    if (worldViewport.x + worldViewport.width > bounds.maxX - 500) {
      // 向右扩展
      expandBounds('right', AUTO_EXPAND_AMOUNT);
    }

    if (worldViewport.y + worldViewport.height > bounds.maxY - 500) {
      // 向下扩展
      expandBounds('down', AUTO_EXPAND_AMOUNT);
    }

    if (worldViewport.x < bounds.minX + 500) {
      // 向左扩展
      expandBounds('left', AUTO_EXPAND_AMOUNT);
    }

    if (worldViewport.y < bounds.minY + 500) {
      // 向上扩展
      expandBounds('up', AUTO_EXPAND_AMOUNT);
    }
  };

  const expandBounds = (direction: 'left' | 'right' | 'up' | 'down', amount: number) => {
    const bounds = canvasStore.viewport.bounds;

    switch (direction) {
      case 'left':
        bounds.minX -= amount;
        bounds.width += amount;
        break;
      case 'right':
        bounds.maxX += amount;
        bounds.width += amount;
        break;
      case 'up':
        bounds.minY -= amount;
        bounds.height += amount;
        break;
      case 'down':
        bounds.maxY += amount;
        bounds.height += amount;
        break;
    }

    // 更新所有相关元素
    updateScrollbars();
  };

  // 新增：屏幕坐标转换为世界坐标
  const screenToWorld = (screenX: number, screenY: number): { x: number, y: number } => {
    // 考虑视口偏移和缩放
    const worldX = (screenX - viewport.value.x) / viewport.value.scale;
    const worldY = (screenY - viewport.value.y) / viewport.value.scale;
    return { x: worldX, y: worldY };
  };

  return {
    elements,
    dragState,
    scaleState, // 新增：缩放状态
    viewport, // 新增
    selectionBox, // 新增
    clipboard, // 新增：剪贴板状态
    elementAddConfig, // 新增：元素添加配置
    elementAddHistory, // 新增：元素添加历史记录
    historyState, // 💡 新增：历史记录状态对象
    undo,
    redo,
    resetPasteState,
    clearHistory,
    // 💡 新增：操作记录核心方法
    createOperation,
    recordOperation,
    pauseRecording,
    resumeRecording,
    getHistoryInfo,
    deepClone, // 💡 新增：深拷贝辅助函数
    addElement,
    selectElement,
    clearSelection,
    toggleElementSelection,
    selectedElements,
    startDrag,
    updateDrag,
    endDrag,
    // 新增的缩放方法
    startScale,
    updateScale,
    endScale,
    scaleSelectedElements, // 按比例缩放选中元素
    startPan, // 新增
    updatePan, // 新增
    endPan, // 新增
    zoom, // 新增
    resetViewport, // 新增
    updateElement, // 确保有这个
    deleteSelectedElements, // 新增
    startSelection, // 新增
    updateSelection, // 新增
    endSelection, // 新增
    copySelectedElements, // 新增：复制方法
    pasteElements, // 新增：粘贴方法
    bringToFront, // 新增：层级提升方法
    updateElementAddConfig, // 新增：更新元素添加配置
    resetElementAddHistory, // 新增：重置元素添加历史记录
    getElementAddStats, // 新增：获取元素添加统计信息
    loadFromLocalStorage,
    loadClipboardFromLocalStorage, // 新增：加载剪贴板数据
    screenToWorld, // 新增：屏幕坐标转世界坐标
    canUndo: computed(() => historyState.value.undoStack.length > 0),
    canRedo: computed(() => historyState.value.redoStack.length > 0),
  };
});